import React, { useEffect, useState } from 'react'
import PageHeader from '../components/PageHeader'
import { getDoctorDetail } from '../utils/api'
import { Image, Space, Tag, Grid, Divider, Button } from 'antd-mobile'
import { useRouterHook } from '../utils/hooks'
import '../assets/style/doctor.scss'
const baseUrl=import.meta.env.VITE_API_BASE_URL
const Doctor: React.FC = () => {
    const { navigate, searchParams } = useRouterHook()
    const [info, setInfo] = useState<Partial<DoctorRowType>>({})
    const id = searchParams.get('id')
    // 请求医生详情
    const getDoctor = async (callback: Function) => {
        const { data } = await getDoctorDetail(id!)
        if (data.code === 200) {
            setInfo(data.data)
        }
        callback && callback(data)
    }
    useEffect(() => {
        getDoctor((data: { code: number }) => {
            if (!id || data.code === 500) {
                navigate('/')
            }
        })
    }, [])
    return (
        <div className='doctor-container'>
            <PageHeader>
                <h3>医生主页</h3>
            </PageHeader>
            <div className="top-wrap">
                <div className="top">
                    <div className="top-inner">
                        <Image style={{ borderRadius: '50%' }} width={100} height={100} fit="cover"
                            src={`${baseUrl+info.avatar}`}></Image>
                        <Space direction="vertical" align="center">
                            <h3>{info.name}</h3>
                            <div>职称:{info.title}</div>
                            <div>
                                <Space>
                                    擅长领域:
                                    {info.tags?.map((item, index) => <Tag color='success' key={index}>{item}</Tag>)}
                                </Space>
                            </div>
                            <div>毕业院校: {info.school}</div>
                            <div>医疗机构名称: {info.bus_title}</div>

                        </Space>
                    </div>

                </div>
            </div>

            <Grid className="grid" columns={4} gap={8}>
                <Grid.Item>
                    <Space direction="vertical">
                        0<p style={{ fontWeight: 700 }}>获赞</p>
                    </Space>
                </Grid.Item>
                <Grid.Item>
                    <Space direction="vertical">
                        0<p style={{ fontWeight: 700 }}>粉丝</p>
                    </Space>
                </Grid.Item>
                <Grid.Item>
                    <Space direction="vertical">
                        0<p style={{ fontWeight: 700 }}>关注</p>
                    </Space>
                </Grid.Item>
                <Grid.Item>
                    <Button  onClick={() => navigate(`/appointAdd`, { state: { doctorid: info.id } })} shape="rounded" size="mini" color="primary">立即预约</Button>
                </Grid.Item>
            </Grid>
            <Divider>
                <h3>医生介绍</h3>
            </Divider>
            <div className="introduce" dangerouslySetInnerHTML={{ __html: info.introduce! }}></div>
        </div>
    )
}

export default Doctor